import React from "react";
import PropTypes from "prop-types";

import "./index.less";

export default function PageHeader({ title, actions, fontSize, center=false, scale=1, scaleX=1 }) {
  const showPortal = window.location.search.includes("show_portal") && localStorage.getItem('colorstyle_color');
  const scaleMin = scale>scaleX ? scaleX : scale;
  const cssstyle = {fontSize: 18*scaleMin}

  return center ? (
    <label style={{margin:"0 auto",textAlign:"center",top: -5, fontSize, color: showPortal && localStorage.getItem('colorstyle_color')}}>
      {title}
    </label>
  ) : (
    <div className="page-header-wrapper">
      <h3 style={showPortal ? { color: localStorage.getItem('colorstyle_color'), ...cssstyle} : cssstyle}>{title}</h3>
      {actions && <div className="page-header-actions">{actions}</div>}
    </div>
  );
}

PageHeader.propTypes = {
  title: PropTypes.string,
  actions: PropTypes.node,
};

PageHeader.defaultProps = {
  title: "",
  actions: null,
};
